<template>
  <section
    v-show="isShow"
    class="e-dialog"
  >
    <div
      v-if="true"
      class="e-dialog-icon"
    >
      <i
        :class="type|typeFilter"
        class="iconfont"/>
    </div>
    <div class="e-dialog-message">
      {{ message }}
    </div>
  </section>
</template>
<script>
export default {
  filters: {
    typeFilter (type) {
      const map = {
        success: 'icon-check',
        error: 'icon-close-circle-o',
        warning: 'icon-exclamation-circle-o'
      }
      return map[type]
    }
  },
  props: {
    type: {
      type: String,
      default: 'success'
    },
    duration: {
      type: Number,
      default: 2000
    },
    message: {
      type: String,
      default: ''
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isShow: false
    }
  },
  watch: {
    value (val) {
      this.isShow = val
    },
    isShow () {
      this.autoHide()
    }
  },
  mounted () {
    document.body.appendChild(this.$el)
  },
  methods: {
    autoHide () {
      if (this.isShow && this.duration) {
        window.setTimeout(() => {
          this.$emit('change', false)
          this.isShow = false
        }, this.duration)
      }
    }
  }
}
</script>
<style lang="scss" scoped="scoped">
  @import "../../styles/var";

  .e-dialog {
    background: rgba(0, 0, 0, 0.70);
    border-radius: 8px;
    width: 160px;
    height: 96px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 1000;
    color: #fff;
    text-align: center;
  }

  .e-dialog-icon {
    margin-top: 16px;
    i {
      font-size: 32px;
    }
  }

  .e-dialog-message {
    margin-top: 8px;
    line-height: 24px;
    font-size: $e_font-size-base;
  }
</style>
